<template>
	<view class="tabbar-container">
		<scroll-view scroll-x class="tab-scroll" :scroll-into-view="item_id" scroll-with-animation>
			<view class="scroll-wrapper">
				<text v-for="(item,index) in list" :key="item._id" class="tab-item" :id="'u'+index"
					@click="toggle_category(index)" :class="{active : active_index===index}">
					{{ item.name }}
				</text>
			</view>
		</scroll-view>
		<uni-icons type="gear" size="25" @click="to_config"></uni-icons>
	</view>
</template>

<script>
	export default {
		name: "TabBar",
		props: {
			list: {
				type: Array,
				default: () => ([])
			},
			active_index: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				item_id: undefined
			}
		},
		methods: {
			to_config() {
				if (!this.check_login()) return;
				uni.navigateTo({
					url: '/pages/config/config'
				})
			},
			toggle_category(index) {
				this.$emit('change', index)
				this.item_id = 'u' + index
			}
		}
	}
</script>

<style lang="scss">
	.tabbar-container {
		@include flex();
		width: 100%;

		.tab-scroll {
			width: 93%;

			.scroll-wrapper {
				@include flex(flex-start);
				height: 60rpx;

				text {
					flex: 1 0 auto;
					padding: 0 20rpx;
					font-size: 28rpx;

					&.active {
						color: $base-color;
					}
				}
			}
		}
	}
</style>
